<template>
  <div class="consultation-apply">
    <el-card shadow="never">
      <template #header>
        <h2>会诊申请</h2>
      </template>
      
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="患者姓名" prop="patientName">
              <el-input v-model="form.patientName" placeholder="请输入患者姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="患者ID" prop="patientId">
              <el-input v-model="form.patientId" placeholder="请输入患者ID" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="主要疾病" prop="disease">
              <el-input v-model="form.disease" placeholder="请输入主要疾病" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急程度" prop="urgency">
              <el-select v-model="form.urgency" placeholder="请选择紧急程度">
                <el-option label="普通" value="normal" />
                <el-option label="紧急" value="urgent" />
                <el-option label="特急" value="critical" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="病情描述" prop="description">
          <el-input type="textarea" :rows="4" v-model="form.description" placeholder="请详细描述病情" />
        </el-form-item>
        
        <el-form-item label="申请科室" prop="departments">
          <el-checkbox-group v-model="form.departments">
            <el-checkbox label="内科">内科</el-checkbox>
            <el-checkbox label="外科">外科</el-checkbox>
            <el-checkbox label="肿瘤科">肿瘤科</el-checkbox>
            <el-checkbox label="心内科">心内科</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交申请</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref()

const form = reactive({
  patientName: '',
  patientId: '',
  disease: '',
  urgency: '',
  description: '',
  departments: []
})

const rules = {
  patientName: [{ required: true, message: '请输入患者姓名', trigger: 'blur' }],
  patientId: [{ required: true, message: '请输入患者ID', trigger: 'blur' }],
  disease: [{ required: true, message: '请输入主要疾病', trigger: 'blur' }],
  urgency: [{ required: true, message: '请选择紧急程度', trigger: 'change' }],
  description: [{ required: true, message: '请输入病情描述', trigger: 'blur' }],
  departments: [{ required: true, message: '请选择申请科室', trigger: 'change' }]
}

const handleSubmit = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      ElMessage.success('会诊申请提交成功')
    }
  })
}

const handleReset = () => {
  formRef.value?.resetFields()
}
</script>

<style lang="scss" scoped>
.consultation-apply {
  h2 {
    margin: 0;
    color: #303133;
  }
}
</style>